@import "util";
@import "../common/rem.less";

.daily-list {
    background: #fff;
    .px2rem(margin-top, 80);
    .date-month {
        .flex-layout();
        .flex-vertical();
        .px2rem(height, 86);
        .px2rem(line-height, 86);
        .px2rem(padding-left, 32);
        .px2rem(padding-right, 32);
        .px2px(font-size, 32);
        color: #F76A75;
        background: #F6F9FA;
        i {
            display: inline-block;
            .px2px(font-size, 50);
            color: #aaa;
            &:last-child {
                .rotate(-180deg);
            }
        }
    }

    .month {
        .flex(1);
        text-align: center;
    }
    .total-detail {
        position: relative;
        //.flex-layout();
        //.flex-vertical();
        .px2rem(padding-left, 130);
        .px2rem(padding-top, 20);
        .px2rem(padding-right, 32);
        .px2rem(height, 140);

    }
    .img-box {
        position: absolute;
        top: 50%;
        .px2rem(left, 32);
        .px2rem(width, 98);
        .px2rem(height, 98);
        .px2rem(line-height, 98);
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        .translate3d(0, -50%, 0);
        img {
            width: 100%;
            height: 100%;
        }
        i {
            .px2px(font-size, 98);
            color: #FFA92F;
        }
    }
    .detail {
        position: relative;
        .flex(1);
        .px2px(font-size, 28);
        .px2rem(margin-left, 28);
        color: #8899A6;
    }
    h3 {
        margin: 0;
        .px2rem(margin-bottom, 10);
        .px2px(font-size, 30);
        color: #2D2D2D;
        font-weight: normal;
        .ellipsis();
        .px2rem(padding-right, 10);
    }
}

.list-box {
    .letter-scroll {
        position: fixed;
        top: 60%;
        right: 10px;
        margin: 0;
        padding: 0;
        .px2rem(width, 30);
        .translate3d(0, -50%, 0);
        list-style: none;
        color: #8799A7;
        .px2px(font-size, 20);
        -webkit-box-shadow: -10px 0 10px 5px #f6f6f6;
        box-shadow: -10px 0 10px 5px #f6f6f6;
        .letter-left-item {
            text-align: center;
            margin: 2px 0;

        }

    }
    .member-list {
        margin: 0;
        dt {
            .px2px(font-size, 26);
            .px2rem(height, 62);
            .px2rem(line-height, 62);
            .px2rem(padding-left, 32);
            .px2rem(padding-right, 32);
            background: #F6F9FA;
            color: #8899A6;
        }
        dd {
            position: relative;
            //&:first-child::after{
            //    position: absolute;
            //    content: '';
            //    width: 100%;
            //    height: 1px;
            //    background: red;
            //    left: 17%;
            //}
            &::after {
                position: absolute;
                content: '';
                width: 100%;
                height: 1px;
                background: #ddd;
                //left: 17%;
                bottom: 0;
                .px2rem(left,140);
                //left: 140px;
            }

            background: #FFF;
            .px2rem(height, 121);
            margin: 0;
            .px2rem(padding-left, 32);
            .px2rem(padding-right, 32);
            .flex-layout();
            .flex-vertical();
        }
        h3 {
            margin: 0;
            .px2px(font-size, 30);
        }
        .img-box {
            .px2rem(width, 80);
            .px2rem(height, 80);
            .px2rem(line-height, 80);
            img {
                width: 100%;
                height: 100%;
            }

        }
    }
    .img-box {
        .px2rem(width, 98);
        .px2rem(height, 98);
        .px2rem(line-height, 98);
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        i {
            .px2px(font-size, 98);
            color: #FFA92F;
        }
    }
    .detail {
        position: relative;
        .flex(1);
        .px2px(font-size, 28);
        .px2rem(margin-left, 28);
        color: #8899A6;
        //&::after {
        //    position: absolute;
        //    content: '';
        //    bottom: -10px;
        //    left: 0;
        //    width: 100%;
        //    height: 1px;
        //    background: #ddd;
        //
        //}
    }
    h3 {
        margin: 0;
        .px2rem(margin-bottom, 10);
        .px2px(font-size, 30);
        color: #2D2D2D;
        font-weight: normal;
    }

}

.none-result {
    display: block;
    position: absolute;
    .px2rem(top, 0);
    right: 0;
    bottom: 0;
    left: 0;
    .px2rem(padding-top, 400);
    background: #F0F4F6;
    color: #B7C0C7;
    .px2px(font-size, 28);
    text-align: center;
    z-index: 99;
}

.none-result img {
    .px2rem(width, 120);
    .px2rem(height, 120);
}